﻿@using Microsoft.Extensions.Options
@using Easy.Options
@{
    Style.Reqiured("Layout").AtHead();
    Style.Reqiured("bootStrap").AtHead();
    Style.Reqiured("codemirror").AtHead();
    Script.Reqiured("jQueryUi").AtFoot();
    Script.Reqiured("admin").AtFoot();
    Script.Reqiured("codemirror").AtFoot();
    Model.ContainerClass = Model.ContainerClass ?? "container";
}
@model LayoutEntity
@inject IOptions<CultureOption> cultureOption
<!DOCTYPE html>
<html lang="@cultureOption.Value.Code">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="cache-control" content="no-store">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache" />
    @if (this.WorkContext().OuterChainPicture)
    {
        <meta name="referrer" content="same-origin" />
    }
    @if (this.WorkContext().EnableResponsiveDesign)
    {
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0" />
    }
    <title>[@L("Design")]@Model.LayoutName</title>
    @StyleAtHead()
    @ScriptAtHead()
    <style type="text/css">
        .CodeMirror-hints {
            z-index: 1060;
        }
    </style>
</head>
<body class="front">
    <form id="LayoutInfo" asp-controller="Layout" asp-action="SaveLayout" method="post">
        <nav id="toolBar">
            <div class="container">
                <div class="clearfix">
                    <div class="pull-left">
                        <span class="badge">@L("Layout Design")</span>
                        <label class="AddContainer zk-btn zk-btn-primary" data-container="container-fluid" title="@L("Drag to layout")" style="cursor:move">
                            <i class="glyphicon glyphicon-unchecked"></i>
                            @L("Container")
                            <span class="glyphicon glyphicon-move"></span>
                        </label>
                        <label class="AddRow zk-btn zk-btn-primary" data-container="container-fluid" title="@L("Drag to container")" style="cursor:move">
                            <i class="glyphicon glyphicon-align-justify"></i>
                            @L("Row")
                            <span class="glyphicon glyphicon-move"></span>
                        </label>
                        <div class="zk-btn-group">
                            <label id="add-col-handle" class="AddCol zk-btn zk-btn-primary" data-col="col-md-" data-val="6" title="@L("Drag to row")" style="cursor:move">
                                <i class="glyphicon glyphicon-tasks"></i>
                                @L("Column Width") <span class="col-size-info">@L("6/12")</span>
                                <span class="glyphicon glyphicon-move"></span>
                            </label>
                            <button type="button" class="zk-btn zk-btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                            </button>
                            <ul class="zk-dropdown-menu col-size">
                                <li><a href="javascript:void(0)" data-val="1">@L("1/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="2">@L("2/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="3">@L("3/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="4">@L("4/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="5">@L("5/12")</a></li>
                                <li class="active"><a href="javascript:void(0)" data-val="6">@L("6/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="7">@L("7/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="8">@L("8/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="9">@L("9/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="10">@L("10/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="11">@L("11/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="12">@L("12/12")</a></li>
                            </ul>
                        </div>
                        <a class="zk-btn zk-btn-primary" id="show-source-code" data-toggle="modal" data-target="#modal-layout-code" title="@L("Code")">
                            <i class="glyphicon glyphicon-pencil"></i>
                        </a>
                        <span class="badge" data-toggle="modal" data-target="#question" style="cursor:help">?</span>
                    </div>

                    <div class="pull-right">
                        <div class="zk-btn-group">
                            <a class="zk-btn zk-btn-primary cancel">
                                <i class="glyphicon glyphicon-arrow-left"></i>
                                @L("Cancel")
                            </a>
                            @if (Model.Page != null)
                            {
                                <a class="zk-btn zk-btn-primary" href="@Url.Action("Design", "Page", new { Model.Page.ID })">
                                    <i class="glyphicon glyphicon-pencil"></i>
                                    @L("Edit Page")
                                </a>
                            }
                            <a href="@Url.Action("LayoutWidget", "Layout", new { LayoutID = Model.ID })" class="zk-btn zk-btn-primary">
                                <i class="glyphicon glyphicon-th-list"></i>
                                @L("Content")
                            </a>
                            <a href="@Url.Action("Edit", "Layout", new {Model.ID})" class="zk-btn zk-btn-primary">
                                <i class="glyphicon glyphicon-edit"></i>
                                @L("Property")
                            </a>
                            <a class="zk-btn zk-btn-primary" id="save">
                                <i class="glyphicon glyphicon-floppy-disk"></i>
                                @L("Save")
                            </a>
                            @await Html.PartialAsync("Partial.Menu", Model)
                        </div>
                        <input type="hidden" id="ContainerClass" name="ContainerClass" value="@(Model.ContainerClass)" />
                        <input type="hidden" id="LayoutId" name="ID" value="@Model.ID" />
                        @if (Model.Page != null)
                        {
                            <input type="hidden" name="Page.ID" value="@Model.Page.ID" />
                        }
                    </div>

                </div>
            </div>
        </nav>
    </form>
    <div id="containers" class="hide">
        @RenderBody()
    </div>

    @await Html.PartialAsync("Layout/Templates")
    @if (!Model.Style.IsNullOrEmpty())
    {
        <link href="@Url.Content(Model.Style)" rel="stylesheet" />

    }
    <div class="zk-modal fade" id="question" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="zk-modal-dialog" role="document">
            <div class="zk-modal-content">
                <div class="zk-modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="zk-modal-title" id="myModalLabel">@L("Grid System")</h4>
                </div>
                <div class="zk-modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th><code>@L("Grid System")</code></th>
                                    <th>
                                        @L("XS Screen")
                                        <small>@L("Mobile (<768px)")</small>
                                    </th>
                                    <th>
                                        @L("SM Screen")
                                        <small>@L("Tablet (≥768px)")</small>
                                    </th>
                                    <th>
                                        @L("MD Screen")
                                        <small>@L("Desktop (≥992px)")</small>
                                    </th>
                                    <th>
                                        @L("LG Screen")
                                        <small>@L("Desktop (≥1200px)")</small>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th class="text-nowrap" scope="row">@L("Grid Display")</th>
                                    <td>@L("Always horizontally")</td>
                                    <td colspan="3">@L("Collapsed to start, horizontal above breakpoints")</td>
                                </tr>
                                <tr>
                                    <th class="text-nowrap" scope="row">@L("Max Width")</th>
                                    <td>@L("None（Auto）")</td>
                                    <td>750px</td>
                                    <td>970px</td>
                                    <td>1170px</td>
                                </tr>
                                <tr>
                                    <th class="text-nowrap" scope="row">@L("Max Column Width")</th>
                                    <td class="text-muted">@L("Auto")</td>
                                    <td>@L("~62px")</td>
                                    <td>@L("~81px")</td>
                                    <td>@L("~97px")</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h3>
                        @L("Help")
                    </h3>
                    <ul>
                        <li>
                            <a href="http://www.zkea.net/zkeacms/document/layout" target="_blank">@L("Document")</a>
                        </li>
                    </ul>
                </div>
                <div class="zk-modal-footer">
                    <button type="button" class="zk-btn zk-btn-default" data-dismiss="modal">@L("Close")</button>
                </div>
            </div>
        </div>
    </div>

    <div class="zk-modal fade" id="modal-layout-code" tabindex="-1" role="dialog" data-keyboard="false" style="display:block;">
        <div class="zk-modal-dialog" style="width:1200px" role="document">
            <div class="zk-modal-content">
                <div class="zk-modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="zk-modal-title">@L("Layout Code")</h4>
                </div>
                <div class="zk-modal-body">
                    <textarea id="layout-code" rows="10" cols="10"></textarea>
                </div>
                <div class="zk-modal-footer">
                    <button type="button" class="zk-btn zk-btn-default" data-dismiss="modal">@L("Close")</button>
                    <button type="button" class="zk-btn zk-btn-primary" id="save-layout-code" data-dismiss="modal">@L("OK")</button>
                </div>
            </div>
        </div>
    </div>
    @if (!Model.Script.IsNullOrEmpty())
    {
        <script type="text/javascript" src="@Url.Content(Model.Script)"></script>
    }
    @StyleAtFoot()
    @ScriptAtFoot()
</body>
</html>
